<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动bug问题</title>
		<link rel="stylesheet" href="css/浮动bug问题.css" />
	</head>
	<body>
		<!-- 元素添加浮动之后 页面结构是元素套元素 一定出问题
		 ① 浮动塌陷
		 产生原因: 页面元素一定嵌套  父元素没有设定高度  子元素浮动
		 解决方案: 
		 ①经验: 找到没有高度的父元素 加高
		 ②推荐: 父元素加溢出 按照子元素宽高进行溢出处理 overflow: hidden
		 
		 ② 浮动卡住
		 产生原因: 父元素宽度不够  子元素高度高于其他子元素
		 解决方案: 
		 ①经验: 【效果左右布局--浮动】给父元素加宽
		       【效果两列布局--浮动】
		 ②推荐: 【效果两列布局--浮动】 找到卡住的元素 添加清除浮动(不建议用both  建议明确浮动方向)
		 -->
		 <div id="father">
		 	<div class="d1">1</div>
		 	<div class="d2">2</div>
		 	<div class="d3">3</div>
		 	<div class="d4">4</div>
		 	<div class="d5">5</div>
		 </div>
		
	</body>
</html>